<template>
  <div class="home-container">
    <H1>Home Page</H1>
    <p>
      <button @click="handleClick">跳转至关于我们</button>
    </p>
    <p>
      <button @click="handleClick2">跳转产品列表</button>
    </p>
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log('home mounted.')
    },

    methods: {
      handleClick() {
        // this.$router.push('/index/mall/about')
        // this.$router.push({
        //   name: 'about',
        //   query: {
        //     id: 200
        //   }
        // })

        this.$router.push({
          name: 'about',
          params: {
            x: 100
          }
        })
      },

      handleClick2() {
        this.$router.push({
          // 注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。
          // path: '/index/mall/products/',

          name: 'products',
          params: {
            id: '002',
            x: {
              y: 100,
              z: {
                w: 10000
              }
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
.home-container {
  height: 100%;
}
.home-container > div {
  display: flex;
  height: 100%;
}

.home-container > div > div {
  padding-left: 20px;
}
.home-container ul {
  width: 100px;
  background-color: #eee;
}

.home-container ul li {
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.home-container div {
  
}
</style>